<template>
	<div id="wrapper">
		<main>
			<div class="right-side">
				<div class="doc">
					<div class="title">选择一个项目以开始</div>
					<p>将您的项目文件夹拖拽到本页面，或点击下方按钮选择文件夹路径</p>
					<div class="add-btn"><button @click="open">选择项目</button></div>
					<br />
				</div>
			</div>
			<div class="left-side">
				<span class="title" v-if="projectList.length < 1">您还没有添加您的项目</span>
				<span class="title" v-else>您的项目</span>
				<div class="project-list">
					<system-information v-for="(item, index) in projectList" :key="index" :item="item" @deleteProject="remove"></system-information>
				</div>
			</div>
		</main>
	</div>
</template>

<script>
import SystemInformation from './LandingPage/SystemInformation'
export default {
  name: 'landing-page',
  components: { SystemInformation },
  data () {
    return {
      list: [],
      projectList: []
    }
  },
  methods: {
    open (link) {
      // 创建input标签
      let inputObj = document.createElement('input') // 设置属性
      inputObj.setAttribute('id', '_ef')
      inputObj.setAttribute('type', 'file')
      inputObj.setAttribute('style', 'visibility:hidden')
      inputObj.setAttribute('webkitdirectory', '')
      inputObj.setAttribute('directory', '')
      // 添加到DOM中
      document.body.appendChild(inputObj) // 添加事件监听器
      inputObj.addEventListener('change', this.updatePath) // 模拟点击
      inputObj.click()
    },
    updatePath () {
      let inputObj = document.getElementById('_ef')
      let files = inputObj.files
      this.findPackge(files[0])
      // 移除事件监听器
      inputObj.removeEventListener('change', function () {}) // 从DOM中移除input
      document.body.removeChild(inputObj)
    },
    // 加载数据库中的数据并组装成相应的显示格式
    loadProject (projectList) {
      const fs = require('fs')
      this.projectList = []
      projectList.forEach(project => {
        fs.readFile(project.path + '/package.json', (err, data) => {
          if (err) throw err
          let packageJson = JSON.parse(data)
          this.projectList.push({
            id_: project._id,
            name: project.name,
            path: project.path,
            scripts: packageJson.scripts
          })
        })
      })
    },
    // 查找数据库的项目列表
    findProject () {
      this.$db.find({}, (err, docs) => {
        if (err) {
          console.log(err)
          return
        }
        this.loadProject(docs)
      })
    },
    // 添加项目到数据库
    addProject (folder) {
      let that = this
      const fs = require('fs')
      this.$db.insert({ path: folder.path, name: folder.name }, function (err, doc) {
        if (err) {
          console.log(err)
          return
        }
        fs.readFile(doc.path + '/package.json', (err, data) => {
          if (err) throw err
          let packageJson = JSON.parse(data)
          that.projectList.push({
            id_: doc._id,
            name: doc.name,
            path: doc.path,
            scripts: packageJson.scripts
          })
        })
      })
    },
    // 添加前查找是否有packge.json文件和数据库中是否有同名目录
    findPackge (folder) {
      // File对象 实例
      const fs = require('fs')
      const that = this
      fs.readFile(folder.path + '/package.json', 'utf-8', function (err, data) {
        if (err) {
          alert('项目未包含package.json文件')
        } else {
          that.addProject(folder)
        }
      })
    },
    // 删除指定记录
    remove (id_) {
      let that = this
      this.$db.remove({ _id: id_ }, { multi: true }, function (err, numRemoved) {
        if (err) {
        }
        const index = that.projectList.findIndex(item => {
          return item.id_ == id_
        })
        that.projectList.splice(index, 1)
      })
    },
    // 设置监听文件目录
    setEventListener () {
      // 获取div对象
      const dragWrapper = document.getElementById('wrapper')
      // 添加拖拽事件监听器
      dragWrapper.addEventListener('drop', e => {
        // 阻止默认行为
        e.preventDefault() // 获取文件列表
        const files = e.dataTransfer.files
        if (files && files.length > 0) {
          // 获取文件路径
          const folder = files[0]
          this.findPackge(folder)
        }
      })
      // 阻止拖拽结束事件默认行为
      dragWrapper.addEventListener('dragover', e => {
        e.preventDefault()
      })
    }
  },
  mounted () {
	  console.log(__dirname)
    this.findProject()
    this.setEventListener()
  }
}
</script>

<style>
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	font-family: 'Source Sans Pro', sans-serif;
}

#wrapper {
	background: radial-gradient(ellipse at top left, rgba(255, 255, 255, 1) 40%, rgba(229, 229, 229, 0.9) 100%);
	height: calc(100vh - 38px);
	padding: 30px 40px;
	width: 100vw;
	overflow: auto;
	padding-bottom: 0px;
	min-width: 450px;
}

#logo {
	height: auto;
	margin-bottom: 20px;
	width: 420px;
}

main {
	display: flex;
	justify-content: space-between;
	flex-direction: column;
}

main > div {
	/* flex-basis: 50%; */
}

.left-side {
	display: flex;
	flex-direction: column;
}
.project-list{
/* 	display: flex;
	flex-wrap: wrap; */
	
}
.welcome {
	color: #555;
	font-size: 23px;
	margin-bottom: 10px;
}

.title {
	color: #2c3e50;
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 6px;
}

.title.alt {
	font-size: 18px;
	margin-bottom: 10px;
}

.doc p {
	color: black;
	margin-bottom: 10px;
	text-align: left;
}

.doc button {
	font-size: 0.8em;
	cursor: pointer;
	outline: none;
	padding: 0.75em 2em;
	border-radius: 2em;
	display: inline-block;
	color: #fff;
	background-color: #4fc08d;
	transition: all 0.15s ease;
	box-sizing: border-box;
	border: 1px solid #4fc08d;
	text-align: left;
}

.doc button.alt {
	color: #42b983;
	background-color: transparent;
}

.doc .add-btn {
	text-align: left;
}
</style>
